<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="box">iphone</div>
<button id="btn">抽奖</button>
</body>

<script type="text/javascript">
  /**
   * 单击抽奖按钮，让box里的奖品随机变化，4秒后停止。
   * 抽奖期间，抽奖按钮不能被再次点击
   * 抽中的奖品从数组中删除，下次抽奖时，不能再次出现
   * 抽奖只能抽三次，超过三次，提示“你好，你今天的抽奖机会已经用光，请明天再来”
   */
  var arr = ['iphone', '笔记本', '小米', '电饭锅', '谢谢参与', '电动自行车'];
  var box = document.getElementById('box');
  var btn = document.getElementById('btn');
  var num = 0;
  var timer = null;
  btn.onclick = function () {
    num++;
    if (num <= 3) {
      btn.disabled = true;
      timer = setInterval(function () {
        box.innerHTML = arr[Math.floor(Math.random() * arr.length)];
      }, 100);
      //  4秒后执行
      setTimeout(function () {
        clearInterval(timer);
        btn.disabled = false;
        var index = arr.indexOf(box.innerHTML);
        arr.splice(index, 1);
      }, 3000)
      
    } else {
      alert('你好，你今天的抽奖机会已经用光，明天再来吧');
    }

  }

</script>
</html>